<template>
  <div class="detail">
    <Back title="商品详情" :sticky="true" />
   <div class="detail-box">
     <div class="detail-img">
       <img class="auto-img" :src="detailData.large_img" alt="">
     </div>
     <div class="detail-content">

       <div class="price-name">
         <div>
           <div class="zhname">{{detailData.name}}</div>
           <div class="enname">{{detailData.enname}}</div>
         </div>
         <div class="price">&yen;{{detailData.price}}</div>
       </div>

       <div class="rules">

         <div class="rules-item" v-for="(item, index) in detailData.rulesData" :key="index">
           <div class="rule-title rule-text">{{item.title}}</div>
           <div class="rule">
             <div class="rule-item rule-text" :class="{active: item.activeIndex === i}" v-for="(v, i) in item.rule" :key="i" @click="selectRule(item, i)">{{v.title}}</div>
           </div>
         </div>

       </div>
       <div class="select-count">
         <div class="sel-count">选择数量</div>
         <div class="count">
           <van-stepper v-model="count" theme="round" button-size="22" disable-input />
         </div>
       </div>
       <div class="desc">
         <div class="desc-title">商品描述</div>
         <div>
           <div class="desc-item" v-for="(item, index) in detailData.desc" :key="index">{{index + 1}}、{{item}}</div>
         </div>
       </div>
     </div>

    <van-goods-action>
      <van-goods-action-icon @click="goShopbag" icon="bag" text="购物袋" :badge="shopbagCount > 0 ? shopbagCount : ''" color="#999" />
      <van-goods-action-icon @click="likeAndNotLike" icon="like" :text="isLike ? '已收藏' : '未收藏'" :color="isLike ? '#EE0A24' : '#999'" />
      <van-goods-action-button color="#365DED" text="加入购物袋" @click="addShopbag" />
      <van-goods-action-button color="#0C34BA" text="立即购买"  @click="goShopbag" />
    </van-goods-action>

   </div>
  </div>
</template>

<script>
  import Back from '../components/Back.vue'
  export default {
    name: 'Detail',
    data() {
      return {

        //商品数量
        count: 0,

        // 商品pid
        pid: '',

        //商品详情数据
        detailData: {},


        //是否收藏
        isLike: false,

        //购物袋数量
        shopbagCount: 0
      };
    },
    components: {
      Back
    },

    created() {
      this.pid = this.$route.params.pid;
      this.getProductDetail(this.pid);

      this.getCurrentLike(this.pid);

      this.getShopbagCount();
    },

    methods: {

      //跳转到购物袋页面
      goShopbag() {
        this.$router.push({name: 'Shopbag'});
      },

      //获取商品详情数据
      getProductDetail(pid) {
        this.axios({
          method: 'get',
          url: '/productDetail',
          params: {
            pid
          }
        }).then(res => {

        //  
         let data = res.data.result[0];

         //处理商品描述
         data.desc = data.desc.split(/\n/);
        //           
         //处理商品规格
        //  [
        //    {
        //      a: [{子规格1}, {}]
        //    }
        //  ]
         let rules = ['milk', 'cream', 'sugar', 'tem'];

         let rulesData = [];


         rules.forEach(v => {

           if (data[v] === '') {
             return;
           }

           let r = {
             title: data[v + '_desc'],
             activeIndex: 0,
             rule: []
           };
          
          let rText = data[v].split(/\//);
          rText.forEach(v => {
            let subR = {
              title: v
            };
            r.rule.push(subR);
          })

          rulesData.push(r);

         })

        //  
         data.rulesData = rulesData;

         this.detailData = data;

        }).catch(err => {
    
                  })
      },

      //选择规格
      selectRule(item, i) {
        if (item.activeIndex === i) {
          return;
        }
        item.activeIndex = i;
      },

      //获取用户的当前收藏商品
      getCurrentLike(pid) {

        this.axios({
          method: 'get',
          url: '/findlike',
          params: {
            pid
          }
        }).then(res => {
          
          //如果用户登录, 处理收藏
          if (res.data.code === 1000) {
            if (res.data.result.length > 0) {
              this.isLike = true;
            }
          }
          
        }).catch(err => {
                  })
      },

      //收藏或者取消收藏
      likeAndNotLike() {
        if (this.isLike) {
          //取消收藏
          this.cancelLike();
        } else {
          //收藏
          this.like();
        }
      },

      //收藏商品
      like() {

        this.axios({
          method: 'post',
          url: '/like',
          data: {
            pid: this.pid
          }
        }).then(res => {
          
           this.$toast(res.data.msg);

          //如果用户没有登录, 则跳转到登录页面
          if (res.data.code === 700) {
            return this.$router.push({name: 'Login'});
          }

          if (res.data.code === 800) {
            //收藏成功
            this.isLike = true;
           
          }

        }).catch(err => {
                  })
      },

      //取消收藏
      cancelLike() {

        this.axios({
          method: 'post',
          url: '/notlike',
          data: {
            pid: this.pid
          }
        }).then(res => {
                     this.$toast(res.data.msg);

          //如果用户没有登录, 则跳转到登录页面
          if (res.data.code === 700) {
            return this.$router.push({name: 'Login'});
          }

          if (res.data.code === 900 && res.data.result === 1) {
            this.isLike = false;
          }
          
        }).catch(err => {
                  })
      },

      //获取购物袋商品数量
      getShopbagCount() {
        this.axios({
          method: 'get',
          url: '/shopcartCount'
        }).then(res => {
                    if (res.data.code === 4000 && res.data.result !== null) {
            this.shopbagCount = res.data.result;
          }
        }).catch(err => {
                  })
      },

      //将商品加入购物袋
      addShopbag() {
        //获取商品规格
        let rule = [];
                this.detailData.rulesData.forEach(v => {
          rule.push(v.rule[v.activeIndex].title);
        })

        
        //参数
        let data = {
          count: this.count,
          rule: rule.join('/'),
          pid: this.pid
        };

        
        this.axios({
          method: 'post',
          url: '/addShopcart',
          data
        }).then(res => {
          
          this.$toast(res.data.msg);

          if (res.data.code === 700) {
            return this.$router.push({name: 'Login'});
          }

          if (res.data.code === 3000) {
            this.shopbagCount += this.count;
          }

        }).catch(err => {
                  })

      }

    }
  }
</script>

<style lang="less" scoped>
  .detail{
    padding-bottom: 50px;
    .desc-title{
      font-size: 14px;
      margin-bottom: 10px;
    }
    .desc{
      margin-top: 20px;
      color: #666;
    }
    .desc-item{
      margin-bottom: 5px;
      &:last-child{
        margin-bottom: 0;
      }
    }
    .sel-count{
      font-size: 14px;
      color: #666;
    }
    .select-count{
      display: flex;
      margin-top: 20px;
      padding: 20px 0;
      border-top: 1px solid #e8e8e8;
      border-bottom: 1px solid #e8e8e8;
      align-items: center;
    }
    .count{
      margin-left: auto;
    }
    .rule-text{
      width: 64px;
      height: 24px;
      font-size: 14px;
      line-height: 24px;
    }

    .rule-title{
      color: #666;
    }

    .rule-item{
      border-radius: 13px;
      background-color: #e8e8e8;
      text-align: center;
      margin-right: 10px;
      color: #666;
      font-size: 12px;
      &:last-child{
        margin-right: 0;
      }

      &.active{
        background-color: #6A91EC;
        color: #fff;
      }
    }

    .rules{
      margin-top: 20px;
    }
    .rules-item{
      display: flex;
      margin-top: 15px;
    }
    .rule{
      display: flex;
    }
    .price{
      margin-left: auto;
      color: #0c34ba;
      font-size: 14px;
      font-weight: bold;
    }

    .zhname{
      font-size: 16px;
    }
    .enname{
      color: #999;
    }
    .price-name{
      display: flex;
      align-items: center;
    }
    .detail-img{
      background-color: #e8e8e8;
    }
    .detail-content{
      padding: 10px;
      margin: 0 10px;
      background-color: #fff;
      position: relative;
      top: -20px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }
  }
</style>